<template>
  <div>
    <div
      class="infinite-list-wrapper news_list"
      :style="{ overflow: 'auto', height: height + 'px' }"
    >
      <ul
        v-infinite-scroll="load"
        infinite-scroll-disabled="loading"
        infinite-scroll-delay="200"
        infinite-scroll-distance="15"
      >
        <li v-for="(item, index) in list" :key="index" class="f-cb">
          <!--@click="list_children(item)"-->
          <a :href="item.source_file" target="_blank" class="f-cb">
            <p>{{ item.notice_title }}</p>
            <p class="timer">{{ item.notice_date }}</p>
          </a>
        </li>
      </ul>
      <p v-if="loading && !noMore" class="more">{{ $t("m.Loading") }}</p>
      <p v-if="noMore" class="more">{{ $t("m.No_more") }}</p>
    </div>
  </div>
</template>
<script>
import { get_stock_notice } from "@/assets/js/API/info.js";
export default {
  props: ["infoCode", "height", "RefreshIndex"],
  data() {
    return {
      list: [],
      url: "",
      dialogVisible: false,
      loading: true,
      noMore: false,
      submit: {
        symbol: null,
        market: null,
        securityType: null,
        page: 1,
        pageSize: 20,
      },
      totalSize: 20,
      totalPage: 1,
    };
  },
  computed: {
    // noMore() {
    //   return this.list.length >= this.totalSize;
    // },
    // disabled() {
    //   return this.loading || this.noMore;
    // },
  },
  mounted() {
    this.submit = {
      symbol: this.StockData.symbol,
      market: this.StockData.market,
      securityType: this.StockData.securityType,
      page: 1,
      pageSize: 20,
    };
    this.getdata();
  },
  methods: {
    async getdata() {
      if (!this.noMore) {
        const res = await get_stock_notice(this.submit);
        if (res.code != 1) return this.$message.error(res.msg);
        if (res.data.list.list.length > 0) {
          this.list = [...this.list, ...res.data.list.list];
          this.submit.page++;
          this.totalSize = res.data.list.totalCount;
          this.totalPage = res.data.list.currentPage;
        } else {
          this.noMore = true;
        }
        this.loading = false;
      }
    },
    load() {
      this.loading = true;
      if (this.infoCode !== "") {
        this.getdata();
      }
    },
    list_children(item) {
      this.url = item.url;
      this.dialogVisible = true;
    },
  },
  watch: {
    // infoCode(val) {
    //   if (val !== "") {
    //     this.submit.page = 1;
    //     this.submit.symbol = val.symbol;
    //     this.submit.market = val.market;
    //     this.submit.securityType = val.securityType;
    //     this.list = [];
    //     this.getdata();
    //   }
    // },
    RefreshIndex(val) {
      if (val !== "") {
        this.submit = {
          symbol: this.StockData.symbol,
          market: this.StockData.market,
          securityType: this.StockData.securityType,
          page: 1,
          pageSize: 20,
        };
        this.list = [];
        this.getdata();
      }
    },
    StockData: {
      handler(val, old) {
        if (old != undefined) {
          this.submit = {
            symbol: val.symbol,
            market: val.market,
            securityType: val.securityType,
            page: 1,
            pageSize: 20,
          };
        }
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    StockData() {
      return this.$store.state.index.StockData;
    },
  },
};
</script>
<style lang="less" scoped>
.news_list {
  box-sizing: border-box;
  ul {
    padding: 15px 0;
    min-width: 860px;
  }
  li {
    display: block;
    font-size: 12px;
    color: @fff;
    cursor: pointer;
    padding: 9px 20px;
    border-bottom: 1px solid @LightBorderLine;
    a {
      display: block;
      color: @fff;
    }
    p {
      width: 100%;
      overflow: hidden; /*超出部分隐藏*/
      white-space: nowrap; /*不换行*/
      text-overflow: ellipsis; /*超出部分文字以...显示*/
      height: 28px;
      line-height: 28px;
      font-size: 12px;
      float: left;
    }
    p.timer {
      color: @fbSix;
    }
  }
  .more {
    color: @fff;
  }
}
::v-deep .news_dialog {
  background: @borderColor;
  border-radius: 3px;
  .el-dialog__title {
    color: @fff;
  }
}
</style>